<template>
	<div class="bg-white px-3 goods_create" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">
		<router-link :to="{name: 'shop_goods_list'}"
		style="position: absolute;top: 12px;left: 200px;">
			<el-button type="primary" size="mini">回到商品列表</el-button>
		</router-link>
		

		<el-form ref="form" label-width="80px">
			<el-form-item label="商品名称">
				<el-input v-model="form.title" class="w-50" placeholder="商品名称,不能超过30个字符"></el-input>
			</el-form-item>
			<el-form-item label="封面">
				<div>
					<span v-if="!form.cover" class="btn btn-light border mr-2"
					@click="chooseImage">
						<i class="el-icon-plus"></i>
					</span>
					<img v-else class=" rounded" :src="form.cover" 
					style="width: 80px;cursor: pointer;" 
					@click="chooseImage"/>
				</div>
			</el-form-item>
			<el-form-item label="商品分类">
				<el-button @click="openCateDrawer">
					{{checkedKeys.length >= 1 ? '修改分类' : '选择分类'}}
				</el-button>
				<span class="ml-1 badge badge-info">{{checkedKeys.length >= 1 ? checkedKeys[0].name : '未选择分类'}}</span>
			</el-form-item>
			<el-form-item label="商品描述">
				<el-input type="textarea" v-model="form.desc" class="w-50" 
				placeholder="选填,商品的卖点简述"></el-input>
			</el-form-item>
			<el-form-item label="商品单位">
				<el-input class="w-25" v-model="form.unit" placeholder="请输入商品单位">
					
				</el-input>
			</el-form-item>
			<el-form-item label="总库存">
				<el-input class="w-25" type="number" v-model="form.stock" placeholder="">
					<template slot="append">{{form.unit ? form.unit : '件'}}</template>
				</el-input>
				
			</el-form-item>
			<el-form-item label="库存预警">
				<el-input class="w-25" type="number" v-model="form.min_stock" placeholder="">
					<template slot="append">{{form.unit ? form.unit : '件'}}</template>
				</el-input>
			</el-form-item>
			<el-form-item label="最低销售价">
				<el-input class="w-25" type="number" v-model="form.min_price" placeholder="">
					<template slot="append">元</template>
				</el-input>
			</el-form-item>
			<el-form-item label="最低原价">
				<el-input class="w-25" type="number" v-model="form.min_oprice" placeholder="">
					<template slot="append">元</template>
				</el-input>
			</el-form-item>
			<el-form-item label="库存显示">
				<el-radio-group v-model="form.stock_display">
					<el-radio :label="0" border>是</el-radio>
					<el-radio :label="1" border>否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="是否上架">
				<el-radio-group v-model="form.status">
					<el-radio :label="0" border>放入仓库</el-radio>
					<el-radio :label="1" border>立即上架</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="运费模版">
				<el-select v-model="form.express_id"  placeholder="请选择运费模版">
					<el-option :label="item.name" :value="item.id"
					v-for="(item,index) in expressOptions" :key="index">
						
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		
		<el-drawer
			title="选择商品分类"
			:visible.sync="isShowCheckCategory"
			direction="rtl"
			size="40%"
			:before-close="handleClose"
			>
			
			<div style="position: absolute;top: 52px;left: 0;right: 0;bottom: 0;">
				<div style="position: absolute;top: 0;right: 0;left: 0;bottom: 60px;overflow-y: auto;">
					<el-tree
					  ref="tree"
					  :data="cateOptions"
					  show-checkbox
					  node-key="id"
					  default-expand-all
					  :default-checked-keys="checkedKeys"
					  :check-strictly="true"
					  @check="check"
					  :props="defaultProps"
					  style="align-items: center;">
					</el-tree>
				</div>
				<div style="height: 60px;position: absolute;bottom: 0;right: 0;left: 0;"
				class="border d-flex align-items-center bg-white">
					<el-button type="primary" class="ml-2" @click="isShowCheckCategory = false">确定</el-button>
					<el-button type="warning" class="ml-2" @click="cleanCategory">清空</el-button>
				</div>
			</div>
			
		</el-drawer>
		
		<el-button type="primary" style="position: fixed;right: 50px;bottom: 50px;"
		@click="submit">提交</el-button>
	</div>
</template>

<script>

export default {
	
	inject:['app', 'layout'],
	
	
	data() {
		return {
			id: 0, //编辑商品的ID
			
			isShowCheckCategory:false,
			checkedKeys: [],
			//tree 节点名称
			defaultProps: {
				children: 'child',
				label: 'name'
			},
			cateOptions: [],
			cateList: [],
			
			expressOptions: [],
			
			form: {
				title: '',
				category_id: 0,
				cover: '',
				desc: '',
				unit: '',
				stock: 0,
				min_stock: 0, //库存预警
				ischeck: 0, //是否审核 0待处理 1通过 2拒绝
				status: 0, //是否上架 0 仓库 1上架
				stock_display: 1, //是否显示库存
				express_id: "", //运费模版
				min_price: 0,
				min_oprice: 0
			}
		}
	},
	
	created() {
		this.id = this.$route.params.id
		
		
		if(this.id) {
			console.log('id', this.id)
			//获取之前的商品详情
			this.layout.showLoading()
			this.axios.get('/admin/goods/read/' + this.id, {token: true}).then(res => {
				let data = res.data.data
				console.log('data', data)
				this.form = data
				this.getInitInfo().then(res => {
					let index = this.cateList.findIndex(item => item.id == this.form.category_id)
					console.log(this.cateList.map(v => v.id + v.name))
					console.log(this.form.category_id)
					console.log('分类index:' + index)
					this.checkedKeys = [{
						id: this.form.category_id,
						name: index >= 0 ? this.cateList[index].name : '未选择分类'
					}]
				})
				
				this.layout.hideLoading()
			}).catch(err => {
				console.log(err)
				this.layout.hideLoading()
			})
		}
		
		
	},
	
	methods: {
		//打开抽屉
		openCateDrawer() {
			this.isShowCheckCategory = true
			this.$nextTick(() => {
				this.$refs.tree.setCheckedKeys([this.form.category_id])
				this.checkedKeys =  this.$refs.tree.getCheckedKeys()
			})
		},
		
		//获取分类信息和快递模版信息
		async getInitInfo() {
			await this.axios.get('/admin/goods/create', {token: true})
				.then(res => {
					let data = res.data.data
					let r = {
						id: -1,
						name: '',
						child: [],
						disabled: true,
					}
					this.cateList = data.cates
					console.log('cateList', this.cateList.map(v => v.id + v.name))
					this.list2tree(data.cates, 0, r)
					this.cateOptions = r.child
					this.expressOptions = data.express.list
				}).catch(err => {
					
				})
		},
		
		//submit
		submit() {
			this.layout.showLoading()
			let url = this.id ? '/admin/goods/' + this.id : '/admin/goods'
			this.axios.post(url, this.form ,{token: true})
			.then(res => {
				this.$message({
					message: this.id ? '商品修改成功' : '商品新增成功',
					type: 'success'
				});
				this.layout.hideLoading()
				this.$router.push({
					name: "shop_goods_list"
				})
			}).catch(err => {
				this.layout.hideLoading()
			})
		},
		
		//list扁平结构数据 -> tree那种结构
		list2tree(list, pid, node) {
			let pArr = list.filter(x => x.category_id == pid)
			if(pArr.length < 1) {
				node.disabled = false
				return
			}
			for(let p of pArr) {
				let tmp = {
					id: p.id,
					name: p.name,
					child: [],
					disabled: false,
					//可以配置成true只让选择最后一级的分类
				}
				node.child.push(tmp)
				this.list2tree(list, p.id, tmp)
			}
		},
		
		//选择图片
		chooseImage() {
			this.app.showImageModel((res) => {
				this.form.cover = res[0].url
			}, 1)
		},
		
		//权限树check事件
		check(...e) {
			if(e[1].checkedKeys.length > 1) {
				this.$message({
					message: '最多选择一个分类',
					type: 'warning'
				});
			}
			this.$refs.tree.setCheckedKeys([e[0].id])
			this.checkedKeys = [e[0]]
			this.form.category_id = e[0].id
		},
		
		//清空分类勾选
		cleanCategory() {
			this.$refs.tree.setCheckedKeys([])
			this.checkedKeys = []
			this.form.category_id = 0
		},
		
		// model关闭之前
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then(_ => {
					done();
				})
				.catch(_ => {})
		},
	},
	

}
</script>

<style>
	.goods_create .el-form-item{
		margin-bottom: 15px;
	}
</style>
